<template>
	<el-dialog class="auth-assign" title="权限分配" :visible.sync="dialogVisible" @close="dialogClose">
		<el-scrollbar class="auth-tree-wrap" ref="authTreeScroll">
			<el-tree
				ref="authTree"
				:data="authData"
				show-checkbox
				node-key="menuId"
				default-expand-all
				:default-checked-keys="menuKeys"
				:props="defaultProps"
			></el-tree>
		</el-scrollbar>


		<div slot="footer">
			<el-button type="primary" size="mini" @click="confirm">确定</el-button>
		</div>
	</el-dialog>
</template>

<script>
import { getMenuTreeNoTop } from "@/api/admin/menu"
export default{
	props:{
		visible:{
			type:Boolean,
			default:false
		},
		menuIds:{
			type:Array,
			default:function(){
				return []
			}
		},
		form:{
			type:Object,
			default:null
		}
	},
	data(){
		return {
			dialogVisible:false,
			menuKeys:[],
			authData:[],
			defaultProps: {
          		children: 'childrenNodes',
          		value:'menuId',
          		label: 'name'
        	}
		}
	},
	created(){
		this.getMenuTree();
	},
	watch:{
		visible(val){
			this.dialogVisible = val;
		},
		menuIds(val){
			this.menuKeys = val;
		}
	},
	methods:{
		//获取菜单树
		getMenuTree(){
			getMenuTreeNoTop().then((res) => {
				console.log("%c角色权限分配时获取所有菜单","background:#966;color:#fff")
				console.log(res)
				this.authData = res.data.data;
			})
		},
		//重置模态框
		resetDialog(){
			//清楚已选项
			this.menuKeys = [];
			this.$refs.authTree.setCheckedNodes(this.menuKeys);
			//设置滚动条回顶部
			var scrollbar = this.$refs["authTreeScroll"].$refs["wrap"];
			scrollbar.scrollTop = 0;
			this.dialogVisible = false;
		},
		//关闭模态框
		dialogClose(){
			this.$emit('close');	
			this.resetDialog();
		},
		//确认权限设置
		confirm(){
			//获取已选项
			var selected = this.$refs.authTree.getCheckedKeys().join(',');
			this.$emit('confirm',{roleId:this.form.roleId,menuId:selected})
		}
	}
}
</script>

<style>
.auth-tree-wrap{
	height: 300px;
}
.auth-tree-wrap .el-scrollbar__wrap {
  overflow: scroll;
  overflow-x:auto;
}
</style>